@charset "utf-8"

// grid
// +touch
//   .main .column
//     flex: none
//     width: 100%

+desktop
  @for $i from 1 through 3
    .column.order-#{$i}
      order: $i

  .main .order-1, .main .order-3
    width: 22%

  .main .order-2
    width: 56%

+until-widescreen
  .columns.main
    margin-left: 0
    margin-right: 0

  .navbar > .container,
  .container > .navbar
    .navbar-brand
      margin-left: 0

    .navbar-menu
      margin-right: 0

// helpers
.is-paddinglessY
  padding-top: 0 !important
  padding-bottom: 0 !important

.img-wrap
  line-height: 0

=nowrap
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.a-tag + .c-help
  display: none

a.a-tag, .a-tag a, span.a-tag
  // &:link, &:visited
  color: #178bcf
  &:hover
    background-color: #dde2eb

a.a-color, .a-color a
  &:link, &:visited
    color: $grey-darker

  &:hover
    color: $link-hover

a.a-pink, .a-pink a, span.a-pink
  color: $grey

  &:link, &:visited
    color: $grey

  &:hover
    color: #ff85ad

=a-ccc
  color: $grey
  border-bottom-style: solid
  border-bottom-color: $grey-light
  border-bottom-width: 1px

  &:hover
    color: $grey-darker
    border-bottom-color: $grey

a.a-ccc, .a-ccc a
  +a-ccc

a.noborder, .noborder a
  border: none !important

a.a-shadow:hover, .a-shadow a:hover
  text-shadow: 0 0 1px

.c-default
  cursor: default

.c-crosshair
  cursor: crosshair

.c-help
  cursor: help

.c-wait
  cursor: wait

.c-pointer
  cursor: pointer

=text-ellipsis
  overflow: hidden
  text-overflow: ellipsis

// modal dialog
.fade
  opacity: 0
  transition: all 0.4s linear

.fade.in
  opacity: 1

.modal-backdrop
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  z-index: 73
  display: none
  background-color: #000
  &.in
    opacity: 0.5

// 滑动开关
.switch-slide
  display: inline-block
  margin-right: 5px

.switch-slide-label
  display: block
  width: 34px
  height: 18px
  background: #ccc
  border-radius: 30px
  cursor: pointer
  position: relative
  -webkit-transition: 0.3s ease
  transition: 0.3s ease
  &::after
    content: ''
    display: block
    width: 16px
    height: 16px
    border-radius: 100%
    background: #fff
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
    position: absolute
    left: 1px
    top: 1px
    -webkit-transform: translateZ(0)
    transform: translateZ(0)
    -webkit-transition: 0.3s ease
    transition: 0.3s ease

.switch-slide input:checked+label
  background: #34bf49
  transition: 0.3s ease
  &::after
    left: 17px
